<template>
	
	<el-card shadow="never" header="个人信息" v-loading="dataLoading">
		<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;" :rules="rules">
			
			<el-form-item label="账号" prop="username">
				<span>{{ form.username ?? "-" }}</span>
			</el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
			</el-form-item>		
			<el-form-item label="用户邮箱" prop="mail">
				<el-input v-model="form.mail" placeholder="请输入用户邮箱" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="mobile">
				<el-input v-model="form.mobile" placeholder="请输入手机号码" clearable></el-input>
			</el-form-item>
			<el-form-item label="电话号码" prop="phone">
				<el-input v-model="form.phone" placeholder="请输入电话号码" clearable></el-input>
			</el-form-item>
			<el-form-item label="分机号码" prop="phoneExt">
				<el-input v-model="form.phoneExt" placeholder="请输入分机号码" clearable></el-input>
			</el-form-item>

			<el-form-item label="邮件验证状态" prop="isMail">
				<span v-if="form.isMail==1" plain size="small" text>
					<sc-status-indicator type="success"></sc-status-indicator> 已验证
				</span>
				<span v-if="form.isMail!=1" plain size="small" text>
					<sc-status-indicator type="info"></sc-status-indicator> 未验证
				</span>
			</el-form-item>
			<el-form-item label="手机验证状态" prop="isMobile">			
				<span v-if="form.isMobile==1" plain size="small" text>
					<sc-status-indicator type="success"></sc-status-indicator> 已验证
				</span>
				<span v-if="form.isMobile!=1" plain size="small" text>
					<sc-status-indicator type="info"></sc-status-indicator> 未验证
				</span>
			</el-form-item>	
			<el-form-item label="账号注册时间" prop="createTime">
				<span>{{ form.createTime ?? "-" }}</span>
			</el-form-item>
			<el-form-item label="账号过期时间" prop="expiredTime">
				<span>{{ form.expiredTime ?? "-" }}</span>
			</el-form-item>
			<el-form-item label="登录次数" prop="loginCount">
				<span>{{ form.loginCount ?? "-" }}</span>
			</el-form-item>
			<el-form-item label="最后登录IP" prop="loginIp">
				<span>{{ form.loginIp ?? "-" }}</span>
			</el-form-item>
			<el-form-item label="最后登录时间" prop="loginTime">
				<span>{{ form.loginTime ?? "-" }}</span>
			</el-form-item>
				

			<el-form-item>				
				<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import { verifyMail,verifyNumber } from '@/sys/checker'
	import { verifyPhone } from '@/utils/verificate'
	import setting from '@/views/sys/user/setting'
	export default {
		data() {
			return {
				dataLoading: true,
				isSaveing: false,
				form: {
					id: null,
					username: '',
					name: '',
					isDisabled: 0,
					isMail: 0,
					isMobile: 0,
					loginTime: null,
					loginIp: '',
					loginCount: 0,
					mail: '',
					mobile: '',
					phone: '',
					phoneExt: '',
					avatar: '',
					deptId: 0,
					postId: 0,
					expiredTime: null,
					createTime: null,
					updateTime: null,
					remark: '',
					_: ""
				},
				//验证规则
				rules: {
					name: [
						{required: true, message: '请输入姓名'}
					],
					mail: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyMail(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					mobile: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyPhone(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					phone: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyNumber(rule,value,callback)
							}else{
								callback();
							}
						} }
					],
					phoneExt: [
						{ validator: (rule, value, callback) => {
							if (value) {
								verifyNumber(rule,value,callback)
							}else{
								callback();
							}
						} }
					]
					
				}
			}
		},
		mounted() {
			this.loadProfile();
		},
		methods: {			
			async loadProfile() {
				this.dataLoading = true
				
				setting.api.profile.get().then(res => {
					if (res.code == setting.successCode) {
						this.form = res.data
					}
				}).catch(error => {
					console.log("Failed: ",error)
				})
				
				this.dataLoading = false
			},
			//表单提交方法
			submit(){
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await setting.api.profile.post(this.form)
						this.isSaveing = false;
						if(res.code == setting.successCode){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("保存成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
